/*       第一屏动画                                        */
/* 初始的时候: 透明度为0(隐藏) + y轴上移100%距离
   过渡结束后: 透明度为1 + y轴回到原点 -->需要配合js 定义动画结束的css
*/
.screen-1__heading,
.screen-1__phone,
.screen-1__shadow{
    transition: all 1s;/*所有属性变化过渡时间为: 1s*/
}
.screen-1__heading_animate_init,
.screen-1__shadow_animate_init{
    opacity: 0;/*透明度为0*/
    transform:translate(0,100%);/* x,y轴移动的距离 */
}
.screen-1__shadow_animate_done,
.screen-1__phone_animate_done,
.screen-1__heading_animate_done{
    opacity: 1;/*透明度为1*/
    transform:translate(0,0);/* x,y轴移动的距离 */
}
.screen-1__phone_animate_init{
    opacity: 0;/*透明度为0*/
    transform:translate(0,-100%);/* x,y轴移动的距离 */
}
/*  ------------------第二屏动画  --------------------------------------------- */
.screen-2__subheading,
.screen-2__phone,
.screen-2__heading{
    transition: all 1s;/*所有属性变化过渡时间为: 1s*/
}
.screen-2__heading_animate_init{
    opacity: 0;/*透明度为0*/
    transform:translate(0,-100%);/* x,y轴移动的距离 */
}
.screen-2__subheading_animate_init{
    opacity: 0;/*透明度为0*/
    transform:translate(0,100%);/* x,y轴移动的距离 */
}
.screen-2__phone_animate_init{
    opacity: 0;/*透明度为0*/
    transform:translate(0,50%);/* x,y轴移动的距离 */
}
.screen-2__phone_animate_done,
.screen-2__subheading_animate_done,
.screen-2__heading_animate_done{
    opacity: 1;/*透明度为1*/
    transform:translate(0,0);/* x,y轴移动的距离 */
}
.screen-2__point{
    transition: all 1s 1s;
}
.screen-2__point_done{
    opacity: 1;/*透明度为1*/
    transform:translate(0,0);/* x,y轴移动的距离 */
}
.screen-2__point_i_1_animate_init{
    opacity: 0;
    transform: translate(-100%,0);
}
.screen-2__point_i_2_animate_init,
.screen-2__point_i_3_animate_init{
    opacity: 0;
    transform: translate(100%,0);
}
/*----------------------------第三屏动画--------------------------------------*/
.screen-3__features,
.screen-3__subheading,
.screen-3__phone,
.screen-3__heading{
    transition: all 1s;/*所有属性变化过渡时间为: 1s*/
}
.screen-3__phone_animate_done,
.screen-3__subheading_animate_done,
.screen-3__heading_animate_done{
    opacity: 1;/*透明度为1*/
    transform:translate(0,0);/* x,y轴移动的距离 */
}
.screen-3__heading_animate_init{
    opacity: 0;/*透明度为0*/
    transform:translate(0,-100%);/* x,y轴移动的距离 */
}
.screen-3__phone_animate_init,
.screen-3__subheading_animate_init{
    opacity: 0;/*透明度为0*/
    transform:translate(0,100%);/* x,y轴移动的距离 */
}
.screen-3__features_animate_init{
    opacity: 0;
    transform: scale(.5);
}
.screen-3__features_animate_done{
    opacity: 1;
    transform: scale(1);
}
/* 鼠标聚焦效果 过渡 */
.screen-3__features__item{
    transition: all .5s;
    cursor: pointer;
}
.screen-3__features__item:hover{
    transform: scale(1.1);
    border-color: #fff;
}

/* ------------------------------第四屏动画  ------------------------------------- */
.screen-4__subheading,
.screen-4__heading{
    transition: all 1s;
}
.screen-4__heading_animate_init{
    opacity: 0;
    transform: translate(0,100%);
}
.screen-4__type__item_i_1{    transition: all 1s .5s;}
.screen-4__type__item_i_2{    transition: all 1s 1s;}
.screen-4__type__item_i_3{    transition: all 1s 1.5s;}
.screen-4__type__item_i_4{    transition: all 1s 2s;}

.screen-4__type__item_i_1_animate_init,
.screen-4__type__item_i_2_animate_init,
.screen-4__type__item_i_3_animate_init,
.screen-4__type__item_i_4_animate_init{
    opacity: 0;
}
.screen-4__type__item_i_1_animate_done,
.screen-4__type__item_i_2_animate_done,
.screen-4__type__item_i_3_animate_done,
.screen-4__type__item_i_4_animate_done{
    opacity: 1;
}
/* -------------------------------第五屏动画 --------------------------------------- */
.screen-5__bg,
.screen-5__subheading,
.screen-5__heading{
    transition: all 1s;
}
.screen-5__heading_animate_init{
    opacity: 0;
    transform: translate(0,-100%);
}
.screen-5__bg_animate_init,
.screen-5__subheading_animate_init{
    opacity: 0;
    transform: translate(0,100%);
}

/* -----------------------------定义+使用帧动画 (循环动画)--------------------------------------*/
/* 定义帧动画动画 */
@-webkit-keyframes bounce {
    0%,100%{transform: scale(0)}
    50%{transform: scale(1)}
}
/*使用帧动画*/
.screen-2__point:before,
.screen-2__point:after{
    content: ' ';
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 1px;
    left: 0;
    background: rgba(255,0,0,.4);
    -webkit-animation: bounce 2s infinite;/*使用 bounce 动画,持续2s,循环播放*/
    border-radius: 50%;
}
.screen-2__point:before{
    -webkit-animation: bounce 2s infinite 1s;/*使用 bounce 动画,持续2s,循环播放,延迟1s*/
}
.screen-2__point_i_1:before,
.screen-2__point_i_1:after{
    left: 200px;
}

/*----导航条 _status_back 样式 -------*/
.header{transition: all 1s;}
.header_status_back{
    background: rgba(0,0,0,.5);
    position: fixed;
    z-index: 3;
    margin-left: -600px;
    left: 50%;
}
.header_status_back .header__logo,
.header_status_back .header__nav-item{
    color: #fff;
}
.header_status_back .header__nav-item_status_active{color: red;}
/* 大纲 _status_in 样式 */
.outline{
    transition: all 1s;
    transform: scale(100%,0);
    opacity: 0;
}
.outline_status_in{
    opacity: 1;
    transform: translate(0,0);
}